import React from 'react';
import {Tabs} from 'antd-mobile';
import {inject, observer} from 'mobx-react';
import {Icon} from '../../../components';
import {ToolHistory} from '../../../utils';

import './index.scss';

/**
 * 底部标签栏
 * 属性：
 * type：布局类型。类型：'view'|'home'|'menu'。
 */
@inject('store')
@observer
export default class Tab extends React.Component {
  render() {
    let {routerData, routerMenu} = this.props.store;
    if (routerMenu) routerMenu = routerMenu[this.props.type];
    if (!routerData || !routerMenu) return;

    return (
      <div className="g-layout-tab">
        <Tabs tabs={routerMenu} page={routerData.index} renderTab={this.renderTab} onTabClick={this.onClickTab} />
      </div>
    );
  }

  /**
   * 渲染标签栏
   */
  renderTab(item) {
    return (
      <div className="tab">
        <Icon type={item.icon} size="sm" />
        <div className="tab-text">{item.label}</div>
      </div>
    );
  }

  /**
   * 标签页点击事件
   * @param tab 标签
   */
  onClickTab(tab) {
    ToolHistory.href(tab.path);
  }
}
